<template>
  <div class="progress-circle">
    <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">    <!-- viewBox跟圆对应，从(0,0)到(100,100)的区域 -->
      <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"/>   <!-- r/半径 cx,cy/圆心的坐标 -->
      <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray"
              :stroke-dashoffset="dashOffset"/>     <!-- stroke-dasharray/周长  stroke-dashoffset/偏移量   stroke-dashoffset = 0 时，颜色灰 stroke-dashoffset = stroke-dasharray 时，颜色全亮 -->
    </svg>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      radius: {
        type: Number,
        default: 100
      },
      percent: {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        dashArray: Math.PI * 100
      }
    },
    computed: {
      dashOffset () {
        return (1 - this.percent) * this.dashArray
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .progress-circle
    position: relative
    circle
      stroke-width: 8px                           // 描边宽度
      transform-origin: center                    // 原点位置
      &.progress-background
        transform: scale(0.9)
        stroke: $color-theme-d                    // 填充颜色
      &.progress-bar
        transform: scale(0.9) rotate(-90deg)      // 为了从顶部开始
        stroke: $color-theme
</style>